﻿<div class="control-group">
    <cms-field>
        <label class="control-label" for="{{vm.modelName}}">{{vm.title}}:</label>
        <div class="controls">
            <select id="{{vm.modelName}}"
                    ng-if="vm.listOptions"
                    name="{{vm.modelName}}"
                    ng-show="vm.formScope.editMode && !vm.readonly"
                    ng-model="vm.model"
                    ng-change="vm.onChange()"
                    ng-required="vm.isRequiredAttributeDefined || vm.required"
                    ng-disabled="vm.disabled"
                    ng-options="o[vm.optionValue] as o[vm.optionName] for o in vm.listOptions">
                <option ng-show="!vm.isRequiredAttributeDefined && !vm.required" value='' selected>{{vm.defaultItemText}}</option>
            </select>

            <div ng-hide="vm.formScope.editMode && !vm.readonly" ng-if="vm.displayValue" class="text-block-display-value">
                <span ng-if="!vm.href">{{vm.displayValue}}</span>
                <a ng-if="vm.href" ng-href="{{vm.href}}">{{vm.displayValue}}</a>
            </div>
            <div ng-hide="vm.formScope.editMode && !vm.readonly" ng-if="!vm.displayValue" class="text-block-display-value">None</div>
            <cms-form-field-validation-summary></cms-form-field-validation-summary>
        </div>
    </cms-field>
    <p class="help-inline" ng-if="vm.description">
        <small>{{vm.description}}</small>
    </p>
</div>